<!--  -->
<template>
  <div>


    <div class="wechat" v-if="loginType === 'wechat'">
 
      <VueWxlogin :appid="weChatModel.appid" scope="snsapi_login" :redirect_uri="weChatModel.redirect_uri" href="" state=""
        style=""></VueWxlogin>
    </div>


    <el-form v-else ref="ruleFormRef" style="max-width: 600px" :rules="rules" :model="ruleForm" label-width="auto"
      class="demo-ruleForm" status-icon>
      <el-form-item label="账号" prop="username">
        <el-input v-model="ruleForm.username" />
      </el-form-item>

      <el-form-item label="密码" prop="pwd">
        <el-input type="password" show-password v-model="ruleForm.pwd" />
      </el-form-item>

      <el-form-item label="验证码" prop="verifyCode">
        <el-input v-model="ruleForm.verifyCode" />
        <img :src="captcha.imageCode" alt="" @click="getCaptchaData"></img>
      </el-form-item>


      <el-form-item>
        <el-button type="primary" @click="submitForm(ruleFormRef)">
          登录
        </el-button>
      </el-form-item>
    </el-form>


    <el-button type="primary" @click="wechat">
      微信登录
    </el-button>
  </div>
</template>

<script lang='ts' setup>
import { reactive, toRefs, ref, onMounted } from 'vue'
import { Auth, Captcha } from '../apis/account/type';
import { FormInstance, FormRules } from 'element-plus';
import { doEncrypt } from '../utils/cryptoUtil';
import { useAuthSotre } from '../sotre/authStore';
import { getCaptcha } from '../apis/account/account';
import router from '../router';
import { isElectron } from '../utils/isElectron';
import VueWxlogin from '../components/wxlogin/vue-wxlogin.vue';

console.log("是否是Electron环境 ", isElectron());
if (isElectron()) {
  const { ipcRenderer } = require('electron');
  ipcRenderer.on("login", (e: any, data: string) => {
    router.push("/wechatLogin?code=" + data)

  })
}


const store = useAuthSotre();

const loginType = ref("user");

const weChatModel = ref({
  appid: "wx2e43a29601556209",
  redirect_uri: "http://web.quanjiu.net/2406care/ldq/wechatLogin"
})
const wechat = () => {
  console.log("微信登录");
  loginType.value = "wechat";

}

const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive<Auth>({
  username: '',
  pwd: '',
  verifyCode: '',
  verifyCodeId: ''
})
const rules = reactive<FormRules<Auth>>({
  username: [
    { required: true, message: '请输入账号', trigger: 'blur' }
  ],
  pwd: [
    { required: true, message: '请输入密码', trigger: 'blur' }
  ]
})
const submitForm = (formEl: FormInstance | undefined) => {

  if (!formEl) return
  formEl.validate(async (valid) => {

    if (valid) {
      console.log("验证通过");

      let pwd = await doEncrypt(ruleForm.pwd);
      const res = await store.loginApi({ ...ruleForm, pwd });
      if (res) {
        router.push("/dashboard")
      }

      console.log("登录后", res);



    }


  })

}



//获取图形验证码

const captcha = ref<Captcha>({
  id: "",
  imageCode: ""
});
const getCaptchaData = async () => {

  const res = await getCaptcha().catch(() => undefined);
  if (res) {
    captcha.value = res;
    ruleForm.verifyCodeId = res.id;
  }

}

getCaptchaData();

onMounted(async () => {

  const module = await import('../assets/json/china.json');
  let _data = module.default;

  console.log(_data);


})




</script>
<style scoped>
.wechat {
  width: 500px;
  height: 500px;
  background: skyblue;
}
</style>